<template>
  <div>
    <div class="card-carousel-wrapper">
        <img :src="activeData.capturePath == '' ? newScreenImg : basePath + activeData.capturePath" title="使用该模板创建" class="bigPic" @click="createScreen(activeData.screenId)">
    </div>
    <div class="card-carousel-wrapper">
		<div class="card-carousel--nav__left" @click="moveCarousel('left')" :disabled="atHeadOfList"></div>
		<div class="card-carousel">
			<div class="card-carousel--overflow-container">
				<div class="card-carousel-cards" :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}">
					<div class="card-carousel--card" v-for="item in items" tabindex="2" :class="[item.screenId == activeData.screenId ? 'onChecked' : '']">
            <img :src="item.capturePath == '' ? newScreenImg : basePath + item.capturePath" class="littlePic" title="点击阅览大图" @click="selectImg(item)">
						<div class="card-carousel--card--footer" @click="selectImg(item)" :title="item.screenName">
							<p class="srceenName">{{ item.screenName }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card-carousel--nav__right" @click="moveCarousel('right')" :disabled="atEndOfList"></div>
	</div>
  </div>
</template>

<script>

import NewScreenImg from '@/assets/image/newScreen.png'
import { getTemplateList } from "@/api/tool/datav/screenApi";

export default {
  props:["templateItems","templateTotal"],
  data() {
    return {
      basePath: process.env.VUE_APP_BASE_API,
      currentOffset: 0,
      windowSize: 3,
      // paginationFactor: 170,
      items: this.templateItems,
      activeData: this.templateItems[0],
      newScreenImg: NewScreenImg,
      templateQuery:{
        pageNum: 1,
        pageSize: 3,
      },
      total:this.templateTotal,//模板数量
    }
  },
  watch:{
    items:{
      deep:true,
      handler(val){
        this.items = val
      }
    }
  },
  computed: {
    atEndOfList() {
      return this.templateQuery.pageNum * this.templateQuery.pageSize >= this.total 
    },
    atHeadOfList() {
      return this.templateQuery.pageNum === 1;
    },
  },
  methods: {
    moveCarousel(direction) {
      // Find a more elegant way to express the :style. consider using props to make it truly generic
      if (direction === "right" && !this.atEndOfList) {
        this.templateQuery.pageNum ++
      } else if (direction === "left" && !this.atHeadOfList) {
        this.templateQuery.pageNum --
      }
      this.getTemplateShowList(this.templateQuery)
    },
    getTemplateShowList(queryParams){
      getTemplateList(queryParams).then(response => {
        let arr = [{screenId: '', screenName: '空白大屏', capturePath: ''}];
        for (const iterator of response.rows) {
          arr.push(iterator);
        }
        this.total = response.total
        // console.log(arr);
        this.items = arr;
        this.activeData = this.items[0]
      });
    },
    selectImg(item) {
        this.activeData = item;
    },
    createScreen(screenId) {
      this.$confirm('是否使用该模板进行编辑?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('create-screen', screenId);
        this.$message({
          type: 'success',
          message: '操作成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    }
  }
}
</script>

<style lang="scss" scoped>
.card-carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 40px;
  color: #666a73;
}
.onChecked {
  border: 2px solid #0D91FF;
  // box-shadow:2px 5px 10px #fff;
}
.srceenName{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width:120px;
}
.card-carousel {
  display: flex;
  justify-content: center;
  width: 680px;
  margin-top: 20px;
}
.card-carousel--overflow-container {
  overflow: hidden;
}
.card-carousel--nav__left, .card-carousel--nav__right {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-top: 2px solid #42b883;
  border-right: 2px solid #42b883;
  cursor: pointer;
  margin: 0 10px;
  transition: transform 150ms linear;
}
.card-carousel--nav__left[disabled], .card-carousel--nav__right[disabled] {
  opacity: 0.2;
  border-color: black;
}
.card-carousel--nav__left {
  transform: rotate(-135deg);
}
.card-carousel--nav__left:active {
  transform: rotate(-135deg) scale(0.9);
}
.card-carousel--nav__right {
  transform: rotate(45deg);
}
.card-carousel--nav__right:active {
  transform: rotate(45deg) scale(0.9);
}

.card-carousel-cards {
  height: 120px;
  display: flex;
  transition: transform 150ms ease-out;
  transform: translatex(0px);
}
.card-carousel-cards .card-carousel--card {
  margin: 0 10px;
  box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
  background-color: #fff;
  border-radius: 4px;
  z-index: 3;
  margin-bottom: 2px;
  cursor: pointer;
}
.card-carousel-cards .card-carousel--card:first-child {
  margin-left: 0;
}
.card-carousel-cards .card-carousel--card:last-child {
  margin-right: 0;
}
.card-carousel-cards .card-carousel--card img {
  vertical-align: bottom;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: opacity 150ms linear;
  user-select: none;
}
.card-carousel-cards .card-carousel--card img:hover {
  opacity: 0.5;
}
.card-carousel-cards .card-carousel--card--footer {
  border-top: 0;
  padding: 7px 15px;
}
.card-carousel-cards .card-carousel--card--footer p {
  padding: 3px 0;
  margin: 0;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 500;
  color: #2c3e50;
  user-select: none;
  text-overflow: ellipsis;
}
.card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) {
  font-size: 12px;
  font-weight: 300;
  padding: 6px;
  background: rgba(40, 44, 53, 0.06);
  display: inline-block;
  position: relative;
  margin-left: 4px;
  color: #666a73;
}
.card-carousel-cards .card-carousel--card--footer p:nth-of-type(2):before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: transparent rgba(40, 44, 53, 0.06) transparent transparent;
  border-style: solid;
  border-width: 12px 12px 12px 0;
}
.card-carousel-cards .card-carousel--card--footer p:nth-of-type(2):after {
  content: "";
  position: absolute;
  top: 10px;
  left: -1px;
  float: left;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: white;
  box-shadow: -0px -0px 0px #004977;
}
// style="width:650px; hight:400px; cursor: pointer; box-shadow:2px 2px 10px #909090;"
.bigPic {
  height: 400px;
  width: 650px;
  cursor: pointer;
  box-shadow:2px 2px 10px #909090;
}
.littlePic {
  height: 85px;
  width: 150px;
}
</style>